<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
        div {
            width: 200px;
            height: 100px;
            margin-top: 10px;
            border: 1px solid #ddd;
        }
        /*.test {
            background: repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
        }
        .test2 {
            background: repeating-linear-gradient(to right, #f00, #ff0 10%, #f00 15%);
        }
        .test3 {
            background: repeating-linear-gradient(45deg, #f00, #ff0 10%, #f00 15%);
        }
        .test4 {
            background: repeating-linear-gradient(to bottom left, #f00, #ff0 10%, #f00 15%);
        }*/
        .test {
            background: repeating-linear-gradient(#f00, #ff0 10%, #ff0 15%);
        }
        .test2 {
            background: repeating-linear-gradient(to right, #f00, #ff0 10%, #f0f 15%);
        }
        .test3 {
            background: repeating-linear-gradient(45deg, #f00, #ff0 10%, #ff0 15%);
        }
        .test4 {
            background: repeating-linear-gradient(to bottom left, #f00, #ff0 10%, #f00 15%);
        }
        .test5{
            background: linear-gradient(to right,#f00,#ff0 10%,#f0f 15%,#ff0 25%,#f0f 30%,#ff0 45%,#f0f 50%,#ff0 60%,#f0f 65%,#ff0 75%,#f0f 80%,#ff0 90%,#f0f 95%);
        }
        .test6{
            background: linear-gradient(to right,#f00,#ff0 10%,#f0f 15%,#f00 20%,#ff0 30%,#f0f 35%,#f00 40%,#ff0 50%,#f0f 55%,#f00 60%,#ff0 70%,#f0f 75%,#f00 80%,#ff0 90%,#f0f 95%,#f00 100%);
        }
        /*.test7{
            background: linear-gradient(to right,#f00,#ff0 10%,#f0f 15%,#f00 17.5%,#ff0 27.5%,#f0f 32.5%,#f00 35%,#ff0 45%,#f0f 50%);
        }*/
        .test7{
            background: linear-gradient(to right,#f00,#ff0 10%,#f0f 15%,#f00 15%,#ff0 25%,#f0f 30%,#f00 30%,#ff0 40%,#f0f 45%);
        }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <div class="test2"></div>
        <div class="test7"></div>
        <div class="test3"></div>
        <div class="test4"></div>
        <p>使用linear-gradient模拟重复渐变</p>
        <div class="test5"></div>
        <div class="test6"></div>
        <div class="test7"></div>
    </body>
</html>